<template>
    <div class="editer-pluga-text">
        <div ref="editorTool" class="pluga-text-toolbar">

        </div>
        <div ref="editorElem" class="pluga-text-tcontent">

        </div>
    </div>
</template>

<script>
    import E from "wangeditor";

    export default {
        name: "EditerText",
        props: {
            value: {
                default: '',
            },
            show: {
                default: false,
            },

        },
        watch: {
            show() {
                this.setHtml();
            },
        },
        data() {
            return {
                editorContent: "",
                editer: null,
            };
        },
        methods: {
            setHtml() {
                this.editer.txt.html(this.value);
            },
        },
        mounted() {
            var editor = new E(this.$refs.editorTool, this.$refs.editorElem); //创建富文本实例
            editor.customConfig.onchange = html => {
                this.$emit("input", html)
            };
            editor.customConfig.pasteIgnoreImg = true;
            editor.customConfig.pasteFilterStyle = true;
            editor.customConfig.menus = [
                //菜单配置
                "bold", // 粗体
                "fontSize", // 字号
                "italic", // 斜体
                "underline", // 下划线
                "strikeThrough", // 删除线
                "foreColor", // 文字颜色
                "backColor", // 背景颜色
                "justify", // 对齐方式
                "undo", // 撤销
                "redo", // 重复
            ];
            editor.create();
            this.editer = editor;

        }

    };

</script>

<style lang="scss" scoped>
    .editer-pluga-text {
        border: 1px solid #e6e6e6;
    }

    .pluga-text-toolbar {
        border-bottom: 1px solid #e6e6e6;
    }

    .pluga-text-tcontent {
        height: 200px;
        width: 350px;
    }
</style>
